<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div style="width: 100%;">
      <div style="width: 100%;">
        <div style="display: flex; padding: 1px 15px;align-items: center;">
          <!-- 组件1 : 新增按钮 + 菜单名称 -->
          <el-button type="primary" @click="add">新建</el-button>
          <span style="margin-left: 10px; font-size: 20px;">客户</span>
          <div style="margin-left: auto;margin-right: auto;">
            <!-- 搜索框 -->
            <ISearch v-if="multipleSelection.length == 0" class="search-operation-container"></ISearch>
            <!-- 操作按钮组 -->
            <div v-else>
              <el-button type="primary" style="background-color: #f1edf0; color: #714B67;">
                {{ "(" + multipleSelection.length + ") 已选取" }}
              </el-button>
              <el-dropdown trigger="click" popper-class="operation-dropdown" @command="handleOperationCommand">
                <el-button type="primary">
                  <el-icon>
                    <Tools />
                  </el-icon> 操作 <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                    <el-dropdown-item command="export">导出</el-dropdown-item>
                    <el-dropdown-item command="archive">归档</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <el-divider border-style="dotted" />
  
      <div style="display: flex; height: 100vh;">
        <!-- 表格列表 -->
        <div style="display: flex;flex-direction: column; height: auto;position: relative; width: 100%;flex: 1;">
          <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
            @row-click="(row: CustomerFrom) => router.push({ path: '/quotation-list/add', query: { id: row.id } })">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="cusLevel" label="客户等级" width=150>
              <template v-slot="scoped">
                <el-rate v-model="scoped.row.cusLevel" size="large" style="width: 100%;" disabled />
              </template>
            </el-table-column>
            <el-table-column prop="cusType" label="客户类型" sortable width=120>
              <template v-slot="scoped">
                {{ codeStore().getSystemCodeName('CRM_CUS_TYPE', scoped.row.cusType) }}
              </template>
            </el-table-column>
            <el-table-column prop="cusName" label="客户名称" width=400 />
            <el-table-column prop="cusIndustry" label="客户行业" width=100 />
            <el-table-column prop="cusPosition" label="客户职位" width=150 />
            <el-table-column prop="cusPhone" label="客户电话" />
            <el-table-column prop="cusEmail" label="客户邮箱" />
            <el-table-column prop="cusAddress" label="客户地址" />
            <el-table-column prop="cusScale" label="企业规模">
              <template v-slot="scoped">
                {{ codeStore().getSystemCodeName('CRM_CUS_SCALE', scoped.row.cusScale) }}
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div style="margin-top: 20px;">
            <IdooPagination :param="initPaginationParam" style="float:right ;margin-right: 25px;"
              @click-call-back="paginationCallBack"></IdooPagination>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { codeStore } from '@/stores/codeStore';
  import { onMounted, ref } from 'vue';
  import IdooPagination from '@/components/base/pagination/index.vue'
  import { Tools } from '@element-plus/icons-vue'
  import ISearch from '@/components/base/search/index.vue'
  import type { PaginationStructure } from '@/components/base/pagination';
  import { _delCustomerInfoByIds, _getCustomerList } from '@/api/generic/quotataion/list-api';
  import router from '@/router';
  import type { CustomerFrom } from '@/types/customer/types';
  //列表勾选得内容
  const multipleSelection = ref<CustomerFrom[]>([]);
  //分页参数
  const initPaginationParam = ref<PaginationStructure>();
  //表格勾选
  const handleSelectionChange = (val: []) => {
    console.log(val);
    multipleSelection.value = val
  }
  const tableData = ref<CustomerFrom[]>([]);
  
  const paginationCallBack = (obj: object) => {
    console.log(obj);
  }
  //新增角色
  const add = () => {
    console.log("!23123123123")
    router.push({
      path: '/quotation-list/add'
    })
  }
  const handleOperationCommand = async (command: string) => {
    console.log("操作命令:", command);
    console.log("选中的数据", multipleSelection.value)
    // 根据不同命令执行相应操作
    if (command === "delete") {
      // TODO: 删除操作逻辑
      if(multipleSelection.value){
        const delIds = multipleSelection.value.map(item => item.id)
        const res = await _delCustomerInfoByIds(delIds.join(','));
        if(res.code === 200){
          refreshTableData();
        }
      }
    } else if (command === "export") {
      // TODO: 导出操作逻辑
    } else if (command === "archive") {
      // TODO: 归档操作逻辑
    }
  }
  
  const refreshTableData = async ()=>{
    await _getCustomerList({}).then(res => {
      console.log(res);
      tableData.value = res.data;
    });
  }
  onMounted(async () => {
    initPaginationParam.value = {
      pageSize: 80,
      totalNum: 235
    }
    refreshTableData();
  });
  </script>
  
  <style scoped>
  :deep(.el-divider--horizontal) {
    margin: 20px 0px 0px !important;
  }
  
  .main-left-area {
    border-right: 1px solid #dcdfe6;
    width: 300px;
    min-height: 400px;
    overflow: outo;
  }
  
  .card {
    flex-basis: 400PX;
    /* 考虑 10px 的间隙，每个卡片占 20% 宽度 */
    height: 110px;
    box-sizing: border-box;
  }
  
  
  :deep(.el-card__body) {
    justify-content: normal !important;
    align-items: normal m !important
  }
  
  .search-operation-container {
    height: 32px;
    display: flex;
    align-items: center;
  }
  </style>
  